<template>
    <div style="display: inline-block">
        <el-select
            v-model="value"
            :multiple="multiple"
            filterable
            remote
            reserve-keyword
            placeholder="请输入老师的名称或手机号"
            :remote-method="remoteMethod"
            :loading="loading"
        >
            <el-option
                v-for="item in options"
                :key="item.teacherId"
                :label="item.nickname"
                :value="item.teacherId"
            >
            </el-option>
        </el-select>
    </div>
</template>

<script>
import { listEduTeacher } from "@/api/edu/teacher";

import { string } from "clipboard";
export default {
    props: {
        teacherIds: {
            type: string,
            default: ""
        },
        multiple: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            queryParams: {
                pageIndex: 1,
                pageSize: 100000,
                query: undefined
            },

            options: [],
            value: [],
            list: [],
            loading: false,
            states: []
        };
    },

    mounted() {
        listEduTeacher(this.queryParams).then(response => {
            if (response.data.count > 0) {
                this.options = response.data.list;
                if (this.teacherIds != "") {
                    if (this.teacherIds.toString().indexOf(",") == -1) {
                        console.log(this.teacherIds.toString());

                        if (this.multiple) {
                            this.value.push(Number(this.teacherIds));
                        } else {
                            this.value = this.teacherIds;
                        }
                        console.log(this.value);
                    } else {
                        let ary = this.teacherIds.split(",");
                        ary.forEach(item => {
                            console.log(item);
                            this.value.push(Number(item));
                        });
                    }
                }
            }
            console.log(this.value);
        });

        this.list = this.states.map(item => {
            return { value: `value:${item}`, label: `label:${item}` };
        });
    },

    watch: {
        //监听子控件内容的改动,发送给父级组件
        childId: {
            handler(newValue, oldValue) {
                this.getList();
                this.getChartData();
            },
            deep: true
        },
        teacherIds() {
            this.value = [];

            if (this.teacherIds != "") {
                if (this.teacherIds.toString().indexOf(",") == -1) {
                    if (this.multiple) {
                        this.value.push(Number(this.teacherIds));
                    } else {
                        this.value = this.teacherIds;
                    }
                } else {
                    let ary = this.teacherIds.split(",");
                    ary.forEach(item => {
                        console.log(item);
                        this.value.push(Number(item));
                    });
                }
            }
        }
    },

    methods: {
        change(newValue) {
            //传给父组件
            if (newValue) {
                this.$emit("setTeacherIds", newValue);
                let data = [];
                if (this.multiple) {
                    this.options.forEach(item => {
                        if (newValue.indexOf(item.teacherId) >= 0) {
                            data.push(item);
                        }
                    });
                    this.$emit("getTeacher", data);
                }
            }
        },
        remoteMethod(query) {
            if (query !== "") {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.queryParams.query = query;
                    listEduTeacher(this.queryParams).then(response => {
                        if (response.data.count > 0) {
                            this.options = response.data.list;
                        }
                    });
                }, 200);
            } else {
                this.queryParams.query = "";
                this.options = [];
            }
        }
    }
};
</script>
